import React, { Component } from 'react'
import { Modal, Button, Row, Col, Popconfirm, InputNumber, TreeSelect } from 'antd';
import {priceFenToYuan, priceYuanToFen} from "@utils/priceConversion";

import _ from 'lodash'
import notify from "@utils/tip";
import { options, city_list } from '@constants/area'
class CityExpressSelector extends Component {
    constructor(props) {
        super(props)
        const { city_config } = this.props || {};
        this.state = {
            visible: false,
            edit: false,
            city_config,
            idx: '',
            additional_weight_price: '',
            first_weight_price: '',
            Key: 1,
            value: [],
        }
    }

    componentWillReceiveProps(nextProps) {
        if ('city_config' in nextProps) {
            if (this.state.city_config !== nextProps.city_config) {
                this.setState({
                    city_config: nextProps.city_config,
                });
            }
        }
    }

    handleHide = (visible) => {
        this.setState({
            visible,
        })
    }

    handleOk = () => {
        const { additional_weight_price, first_weight_price, edit, idx, city_config, value } = this.state
        if (!value.length) {
            notify('请选择城市', 'warn')
            return
        }
        if (additional_weight_price === '' || typeof (additional_weight_price) === 'undefined') {
            notify('请输入首重费', 'warn')
            return
        }
        if (first_weight_price === '' || typeof (first_weight_price) === 'undefined') {
            notify('请输入续重价', 'warn')
            return
        }
        const _city_config = _.cloneDeep(city_config)
        if (edit) {
            _city_config[idx].cities = value
            _city_config[idx].first_weight_price = first_weight_price
            _city_config[idx].additional_weight_price = additional_weight_price
        } else {
            _city_config.push({
                'cities': value,
                'first_weight_price': first_weight_price,
                'additional_weight_price': additional_weight_price
            })
        }
        this.setState({
            city_config: _city_config,
            visible: false
        }, () => {
            this.props.onsubmit(_city_config)
        })
    }

    deleteRange = (idx) => {
        const { city_config } = this.state
        const _city_config = _.cloneDeep(city_config)
        this.setState({
            city_config: _city_config.splice(idx, 1)
        }, () => {
            this.props.onsubmit(_city_config)
        })
    }

    addRange = () => {
        const { city_config } = this.state
        if (city_config.length >= 10) {
            notify('最多添加十个区域', 'warn')
            return
        }
        this.setState({
            visible: true,
            edit: false,
            first_weight_price: '',
            additional_weight_price: '',
        })
    }

    changeNumber = (type, value) => {
        if (type == 'ship') {
            this.setState({
                additional_weight_price: priceYuanToFen(value)
            })
        } else if (type == 'start') {
            this.setState({
                first_weight_price: priceYuanToFen(value)
            })
        }
    }

    valueChange = (value) => {
        this.setState({
            value: value
        })
    }

    editRange = (idx) => {
        const { city_config } = this.state
        this.setState({
            visible: true,
            edit: true,
            idx,
            value: city_config[idx].cities,
            additional_weight_price: city_config[idx].additional_weight_price,
            first_weight_price: city_config[idx].first_weight_price,
        })
    }

    render() {
        const { city_config, visible, first_weight_price, additional_weight_price, value } = this.state
        const { canEdit } = this.props
        const RangeDetail = (city_config || []).map((mConfig, idx) => {
            return (
                <Row key={idx} className={`mgt-12 flex-row-between customer-table-line `}>
                    <Col span="8" className="ft-16 ft-clr-d text-overflow">
                        {mConfig.cities.map(item => { return city_list[item] }).join(', ')}
                    </Col>
                    <Col span="1" />
                    <Col span="5" className="ft-14 ft-clr-ml">
                        {`首重: ${priceFenToYuan(mConfig.first_weight_price)}元`}
                    </Col>
                    <Col span="5" className="ft-14 ft-clr-ml">
                        {`续重: ${priceFenToYuan(mConfig.additional_weight_price)}元`}
                    </Col>
                    { canEdit ?
                        <Col span="5" className="txr">
                            <span className='mgr-8 ft-hover' onClick={() => this.editRange(idx)}>编辑</span>
                            <Popconfirm title="确定要删除这个区域吗？"
                                onConfirm={() => this.deleteRange(idx)}
                                onCancel={() => { }}>
                                <span className='mgr-8 ft-hover'>删除</span>
                            </Popconfirm>
                        </Col> : null}
                </Row>
            )
        })

        return (
            <div>
                { RangeDetail}
                { canEdit ?
                    <Button className="button-small"
                        type="primary"
                        ghost
                        onClick={() => this.addRange()}
                    >＋添加区域</Button> : null}
                <Modal
                    title={'配送范围'}
                    className={"city-selector-container"}
                    visible={visible}
                    maskClosable={true}
                    onOk={this.handleOk}
                    destroyOnClose={true}
                    width={688}
                    height={768}
                    footer={null}
                    onCancel={() => this.handleHide(false)}
                >
                    <div className='city-range-modalBox'>
                        <Row className="mgt-16">
                            <Col span="4">
                                <span className='ft-clr-d'>首重费用:</span>
                            </Col>
                            <Col span="20">
                                <InputNumber
                                    min={0}
                                    max={999}
                                    step={1}
                                    precision={2}
                                    value={priceFenToYuan(first_weight_price)}
                                    style={{ width: '480px' }}
                                    onChange={value => this.changeNumber('start', value)}
                                /> 元
                            </Col>
                        </Row>
                        <Row className="mgt-16">
                            <Col span="4">
                                <span className='ft-clr-d'>续重费用:</span>
                            </Col>
                            <Col span="20">
                                <InputNumber
                                    min={0}
                                    max={999}
                                    step={1}
                                    precision={2}
                                    value={priceFenToYuan(additional_weight_price)}
                                    style={{ width: '480px' }}
                                    onChange={value => this.changeNumber('ship', value)}
                                /> 元
                            </Col>
                        </Row>
                        <Row className="mgt-16">
                            <Col span="4">
                                <span className='ft-clr-d'>选择省市:</span>
                            </Col>
                            <Col span="20">
                                <TreeSelect
                                    style={{ width: '480px' }}
                                    treeData={options}
                                    multiple
                                    defaultValue={value}
                                    allowClear
                                    onChange={this.valueChange}
                                    treeCheckable
                                />
                            </Col>
                        </Row>
                        <div className="modal-button-line">
                            <Button className="mgr-16" onClick={() => this.handleHide(false)}>取消</Button>
                            <Button type="primary" onClick={this.handleOk}>保存</Button>
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
}

export default CityExpressSelector